<style>

.a-main-padding{padding:0px 30px;}
.a-main-margin{margin:auto 30px;}

.a-nav{line-height:75px;border-bottom:1px solid #d9dadc;margin-bottom:20px;}
.a-nav h2{font-size:16px;font-weight: 200;}
.a-nav div{float:right;}
.a-nav div{}
</style>
<div class="a-nav a-main-padding">
	<div class="tools">
		<a>分享</a>
		<a>收藏</a>
	</div>
	<h2>关键词</h2>
</div>




<script>
$(document).ready(function(){
	var moreWidth = 200;

	var besides = 650;
	var totalWidth = 0;
	var maxWidth = 0;
	$(".a-tab-list a").each(function(){
		var itemWidth = $(this).outerWidth();
		besides -= itemWidth;
		maxWidth = itemWidth>maxWidth?itemWidth:maxWidth;
		if(besides < 0){
			$(this).appendTo(".a-tab-more div");
			//如果出现当前标签在more里面，那么就将“更多”改为当前标签名
			if($(this).hasClass("current")){
				$(".a-tab-more .more").text($(this).text())
			}
		}
	});
	if(besides>-500)moreWidth = 100;
		else if(besides>-1000)moreWidth = 200;
		else if(besides>-2000)moreWidth = 300;
		else if(besides>-3000)moreWidth = 400;
		else moreWidth = 500;

	moreWidth = moreWidth<maxWidth?maxWidth:moreWidth;
	
	$(".a-tab-more").hover(function(){

		$(this).find("div")
				.width(moreWidth)
				.show()
	},function(){
		$(this).find("div").hide();
	});
});
</script>
<style>
dl.a-tab{}
dl.a-tab dt{border-bottom:1px solid #d9dadc;padding:0px 0px 0px 20px;}
dl.a-tab dt .a-tab-list a{display:inline-block;padding:8px 16px;color:#222;}
dl.a-tab dt .a-tab-list a.current{color:#3B8D8D;background-color:#F4F5F9;border:1px solid #d9dadc;border-width:1px 1px 0px 1px;}
dl.a-tab dt .a-tab-list a:hover{color:#3B8D8D;background-color:#F4F5F9;}
dl.a-tab dt div.a-tab-more{position: relative;}
dl.a-tab dt div.a-tab-more div{background-color: #fff;border:1px solid #d9dadc;display:none;position: absolute;right:0px;padding:10px;}
dl.a-tab dt div.a-tab-more div a{display:inline-block;padding:6px;color:#222;}
dl.a-tab dt div.a-tab-more div a.current{background-color:#F4F5F9;color:#3B8D8D;}
dl.a-tab dt div.a-tab-more div a:hover{background-color:#F4F5F9;color:#3B8D8D;}
dl.a-tab dt div.a-tab-more a{}
dl.a-tab dt div.a-tab-more a.more{display:block;text-align:right;padding:8px 16px 9px 16px;background-color:#F4F5F9;}


dl.a-tab dd{margin-top:10px;padding:10px;}
</style>
<dl class="a-tab a-main-margin">
	<dt>
		<div class="a-tab-more n-right">
			<a class="more">更多</a>
			
			<div>
			</div>
		</div>
		<div class="a-tab-list">
			<a>禁词</a>
			<a class="current">敏感词</a>
			<a>政治</a>
				<a>畅言禁词</a>
				<a>畅言多词</a>
				<a>畅言所有词</a>
				<a>畅言主辅</a>
				<a>其他</a>
				<a>社区广告-多词</a>
				<a>社区色情-多词</a>
				<a>社区色情-单词</a>
				<a>社区广告-单词</a>
				<a>焦点社区多词禁发</a>
				<a>领导人辱骂</a>
				<a>骂人(政治)</a>
				<a>色情名词和淫秽</a>
				<a>色情淫秽</a>
				<a>博客广告</a>				<a>畅言主辅</a>
				<a>其他</a>
				<a>社区广告-多词</a>
				<a>社区色情-多词</a>
				<a>社区色情-单词</a>
				<a>社区广告-单词</a>
				<a>焦点社区多词禁发</a>
				<a>领导人辱骂</a>
				<a>骂人(政治)</a>
				<a>色情名词和淫秽</a>
				<a>色情淫秽</a>
				<a class="current">博客广告</a>
				<a>涉枪动词</a>
				<a>涉枪名词动词</a>
				<a>政治(cy)</a>
				<a>广告视频网站(cy)</a>
				<a>色情(cy)</a>
		</div>
	</dt>
	<dd>
		sdfsdfsdf
		
	</dd>
</dl>













<style>
.n-err{border-color:#ffeebb;color:#eb7350;background:url(/skin/img/box-err.png) #ffeebb no-repeat 40px 10px;}
.n-txt{border-color:#e0eaf6;color:#222;background:url(/skin/img/box-txt.png) #e0eaf6 no-repeat 40px 10px;}
.n-tips{border-color:#f4f5f9;color:#8d8d8d;background:url(/skin/img/box-tips.png) #f4f5f9 no-repeat 40px 10px}

</style>

<div class="a-main-margin">
	<div class="n-err">错误</div>
	<div class="n-txt">普通文本</div>
	<div class="n-tips">提示信息</div>
	
	
</div>






<style>
/*标准表格*/
.n-table{border-color:#d9dadc;}
.n-table td,.n-table th{}
.n-table thead td{}
.n-table thead td a{}
.n-table thead td div.search{}
.n-table tfoot td{}
.n-table tbody th{background-color:#F4F5F9;color:#222;border-color:#d9dadc;}
.n-table tbody td{border-color:#d9dadc;}
.n-table tbody tr.odd td{background-color:#f9ffff;}
.n-table tbody tr.even td{}
.n-table tbody tr.bright td{background-color:#fff9ff;}


</style>

<div id="haha" class="a-main-margin">
	<table class="n-table n-size-full n-sep-top">
		<tbody>
		<tr>
			<th>字段1</th>
			<th>字段2</th>
			<th>字段3</th>
			<th>字段4</th>
		</tr>
		<tr>
			<td>233</td>
			<td>11</td>
			<td>地方</td>
			<td>234</td>
		</tr>
		<tr>
			<td>233</td>
			<td>11</td>
			<td>地方</td>
			<td>234</td>
		</tr>

		<tr>
			<td>233</td>
			<td>11</td>
			<td>地方</td>
			<td>234</td>
		</tr>
		<tr>
			<td>233</td>
			<td>11</td>
			<td>地方</td>
			<td>234</td>
		</tr>
		<tr>
			<td>233</td>
			<td>11</td>
			<td>地方</td>
			<td>234</td>
		</tr>
		</tbody>
	</table>
</div>




<style>
	
</style>
<div class="a-main-margin">
	<div class="n-paging">
		<a href="">首页</a>
		<a href="page=999">上一页</a>
		<a href="page=997">97</a>
		<a href="page=998">98</a>
		<a href="page=999">99</a>
		<span>100</span>
		<a href="page=1001">101</a>
		<a href="page=1002">102</a>
		<a href="page=1003">103</a>
		<a href="page=1004">104</a>
		<a href="page=1001">下一页</a>
		<a href="page=4373">末页</a>
	</div>
</div>


<style>
/*标准浮层*/
#pop{overflow:hidden;}
#pop .sunblind{position:absolute;border-width:0px;filter:alpha(opacity=40);opacity:0.4;z-index:1000;top:0px;left:0px;width:100%;height:100%;display:none;background-color:#000;}
#pop .ply-html{width:600px;overflow-y:auto;overflow-x:hidden;display:none;border:0px solid #d9dadc;position:absolute;z-index:1001;background-color:#efefef;}
#pop .ply-bar{padding:0px 10px;line-height:52px;background-color:#F4F5F9;}
#pop .ply-title{}
#pop .ply-close{display:block; float:right;cursor:pointer;}
#pop .ply-hidden{display:none;}
#pop .ply-body{overflow:auto;padding:10px;background-color:#fff;min-height: 60px;}
#pop .ply-footer{line-height:30px;height:20px;padding:5px 10px;display:none;}
#ply-iframe{display:none;}
</style>
<div class="a-main-margin">
	<a href="javascript:void(0);" onclick="ui.pop($('#haha'))">我是弹窗</a>
</div>




<style>
/*日历板*/
.n-calendar{background-color:#fefefe;}
.n-calendar-pad{border-color:#d9dadc;background-color:#fcfcfc;}
.n-calendar-pad dt div{}
.n-calendar-pad dt div.calendar-date a{}
.n-calendar-pad dt div.calendar-date span.calendar-month{}
.n-calendar-pad dt div.calendar-week span{}
.n-calendar-pad a,.n-calendar-pad span{background-color:#fff;border-color:#d9dadc;}
.n-calendar-pad span{background-color:#fff;}
.n-calendar-pad dd a{background-color:#fff;border-color:#d9dadc;}
.n-calendar-pad dd a.current{background-color:#fed!important;}
.n-calendar-pad dd a.weekend{background-color:#F4F5F9;}
.n-calendar-pad dd span{background-color:#fff;border-color:#fff;color:#fff;}

</style>

<div class="a-main-margin">
	<input type="text" class="n-calendar" value="2015-08-18" />
</div>







<input type="text" value="" />

<style>
select{display:none;}
dl.n-select{display:inline-block;height:32px;color:#8d8d8d;position: relative;}
dl.n-select dt{border:1px solid #d9dadc;width:160px;line-height:22px;padding:5px 10px;}
dl.n-select dd{width:100%;border-bottom:1px solid #d9dadc;}
dl.n-select dd div{height:32px;line-height:22px;padding:5px 10px;border:1px solid #d9dadc;border-width:0 1px 0 1px;}
dl.n-select dd div:hover{background-color:#F4F5F9;}
dl.n-select dt.selected{border-bottom:1px solid #d9dadc;}
dl.n-select dd{position: absolute;}
</style>

<script>
$(document).ready(function(){
	$("select").each(function(){
		var that = $(this)
		var main = $()
		var handle = $("<dl><dt></dt><dd></dd></dl>")
							.addClass('n-select')
							.insertAfter($(this))
							.hover(function(){
								$(this).find('dd').show()
							},function(){
								$(this).find('dd').hide()
							})
		$(handle).find('dt').text('请选择');

		var i = 0;
		$(this).find("option").each(function(){
			var item = $("<div>")
						.attr("i",i)
						.text($(this).text())
						.click(function(){
							//alert(parseInt($(this).attr('i')))
							$(that).find("option")[parseInt($(this).attr('i'))].selected = true
							//console.log($(that).find(".selected"))
							$(handle).find('dt').text($(this).text())
						})
		
			handle.find('dd').append(item)
			//console.log($(this).attr('selected'))
			if(i==0 || $(this).attr('selected'))item.click()

			i++;
		})
	});
})
</script>

<div class="a-main-margin">
	
	<div class="n-search n-sep-top">
		<input type="text" />
		<input type="text" />
		<input type="text" />
		<input type="text" />
		<input type="text" />
		<input type="text" />
		
		<select id="test">
			<option>选项一选项一选项一选项一选项一选项一选项一选项一</option>
			<option>选项二</option>
			<option>选项三</option>
			<option>选项四</option>
			<option selected>选项五</option>
		</select>
	</div>
</div>






